<script lang="ts" setup>
import { reactive, ref } from "vue"
import { searchIcon } from "../methods/index"
import CustomSwitch from "../components/switch-customer.vue"
import ListItem from "../components/list-item.vue"
// 选中的图标索引，初始值为0，即选中第一个图标
const selectedIconIndex = ref(0)
const searchReactive = reactive({
  fl: "",
  gj: "",
  fsl: "",
  isEmail: "",
})
// 处理图标点击事件
const handleIconClick = (index: number) => {
  console.log("handleIconClick called with index:", index)
  selectedIconIndex.value = index
}
const value4 = ref(true)
const value5 = ref(true)
const itemList = ref([
  {
    id: 1,
    nickName: "SpawnPoilnt",
    tags: ["科技", "时尚生活"],
    country: "美国",
    icon: "https://picsum.photos/40/40?random=1",
    meta: {
      粉丝: "95.70万",
      平均观看量: "40.85万",
      平均互动率: "5.74%",
      商业合作数: "1940",
    },
    model: {
      videoUrl: "",
      banner: [],
    },
    msg: {
      like: true,
      pl: false,
      gk: false,
    },
  },
  {
    id: 2,
    nickName: "SpawnPoilnt",
    tags: ["科技", "时尚生活"],
    country: "美国",
    icon: "https://picsum.photos/40/40?random=1",
    meta: {
      粉丝: "95.70万",
      平均观看量: "40.85万",
      平均互动率: "5.74%",
      商业合作数: "1940",
    },
    model: {
      videoUrl: "",
      banner: [],
    },
    msg: {
      like: false,
      pl: true,
      gk: false,
    },
  },
  {
    id: 3,
    nickName: "SpawnPoilnt",
    tags: ["科技", "时尚生活"],
    country: "美国",
    icon: "https://picsum.photos/40/40?random=1",
    meta: {
      粉丝: "95.70万",
      平均观看量: "40.85万",
      平均互动率: "5.74%",
      商业合作数: "1940",
    },
    model: {
      videoUrl: "",
      banner: [],
    },
    msg: {
      like: false,
      pl: false,
      gk: true,
    },
  },
  {
    id: 4,
    nickName: "SpawnPoilnt",
    tags: ["科技", "时尚生活"],
    country: "美国",
    icon: "https://picsum.photos/40/40?random=1",
    meta: {
      粉丝: "95.70万",
      平均观看量: "40.85万",
      平均互动率: "5.74%",
      商业合作数: "1940",
    },
    model: {
      videoUrl: "",
      banner: [],
    },
    msg: {
      like: true,
      pl: false,
      gk: false,
    },
  },
])
const handleItemAction = ({ action, item }) => {
  console.log(`对项目 ${item.title} 执行操作: ${action.id}`)
  // 这里可以添加具体的操作逻辑
}
</script>

<template>
  <div class="container">
    <!-- 半透明背景容器 -->
    <!-- <div class="list-channel"></div> -->

    <!-- 文本标题，独立于背景容器 -->
    <p class="title">
      {{ $t("list.全球网红、全渠道，无忧对接网红资源+营销") }}
    </p>
    <div class="search-chunck">
      <div class="icon-options">
        <!-- 图标选项，添加点击事件和选中状态判断 -->
        <div
          class="icon-body"
          v-for="(item, index) in searchIcon"
          :key="index"
          :class="{ selected: index === selectedIconIndex }"
          @click="handleIconClick(index)"
        >
          <img :src="item.iconUrl" :alt="item.iconUrl" />
        </div>
      </div>
      <div class="under-line"></div>
      <input
        class="text-input"
        type="text"
        :placeholder="$t('list.请输入网红的名称或内容类别')"
      />
      <div class="search-button">
        <img
          src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngc8b1ea949fc95d3fb5b0824ad581ae9b49205f3bc7f54ad0fc1d83c354c86268?noCache=true"
          alt=""
        />
      </div>
    </div>
    <div class="list-content">
      <div class="header">
        <div class="search-left">
          <div>
            <el-select
              v-model="searchReactive.fl"
              :placeholder="$t('list.分类')"
              class="el-select-w118"
            >
              <el-option :lable="$t('list.分类')" :value="$t('list.分类')" />
            </el-select>
          </div>
          <el-select
            v-model="searchReactive.gj"
            :placeholder="$t('list.国家')"
            class="el-select-w118"
          >
            <el-option :lable="$t('list.国家')" :value="$t('list.国家')" />
          </el-select>
          <el-select
            v-model="searchReactive.fsl"
            :placeholder="$t('list.粉丝量')"
            class="el-select-w118"
          >
            <el-option :lable="$t('list.粉丝量')" :value="$t('list.粉丝量')" />
          </el-select>
          <el-select
            v-model="searchReactive.isEmail"
            :placeholder="$t('list.是否有邮箱')"
            class="el-select-w150"
          >
            <el-option
              :lable="$t('list.是否有邮箱')"
              :value="$t('list.是否有邮箱')"
            />
          </el-select>
          <div class="qr-code">
            <img
              src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng1d90c598f4abf85d78b5156d026592f09274bab6ab7d668590bf5997a7545ff9?noCache=true"
              alt="二维码"
            />
          </div>
        </div>
        <div class="search-right">
          <div class="search-right-tool">
            <CustomSwitch
              v-model="value4"
              activeColor="linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%)"
            />
            <span>{{ $t("list.本地账号未联系") }}</span>
          </div>
          <div class="search-right-tool">
            <CustomSwitch
              v-model="value5"
              activeColor="linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%)"
            />
            <span>{{ $t("list.所有账号未联系") }}</span>
          </div>
          <div class="search-right-tool">
            <img
              src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng332371ad852a82f3695f69fbf8ca4b6ad3f7c89055464864f10e8a7e2a07daff?noCache=true"
              alt="icon"
            />
            <span>{{ $t("list.默认排序") }}</span>
          </div>
        </div>
      </div>
      <div class="list-container">
        <ListItem
          v-for="item in itemList"
          :key="item.id"
          :item="item"
          @action="handleItemAction"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 1200px;
}

.list-channel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 924px;
  background: #fbfaff;
  opacity: 0.0616;
  filter: blur(50px);
  z-index: 1; /* 置于底层 */
}

.title {
  position: relative;
  width: 661px;
  height: 40px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28px;
  color: #27272f;
  line-height: 40px;
  text-align: center;
  font-style: normal;
  margin: 0 auto;
  z-index: 2; /* 置于上层 */
}

.search-chunck {
  max-width: 1168px;
  height: 68px;
  background: #ffffff;
  margin: 76px auto;
  box-shadow: 0px 8px 20px 0px rgba(170, 123, 162, 0.14);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  padding: 11px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.under-line {
  width: 1px;
  height: 22px;
  margin: 8px 24px;
  border: 1px solid #e9e9e9;
}

.text-input {
  border: none;
  flex: 1;
}

.text-input:focus {
  outline: none;
  border: none;
}

.search-button img {
  width: 104px;
  height: 46px;
  cursor: pointer;
}

.icon-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #eff0f4;
  border-radius: 8px;
}

.icon-body {
  width: 53px;
  height: 46px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-body img {
  width: 20px;
  height: 20px;
}

/* 选中状态样式 */
.selected {
  background: rgba(246, 234, 255, 0.93) !important;
  border-radius: 8px !important;
  border: 1px solid #a43aff !important;
}

.list-content {
  width: 1168px;
  height: 852px;
  background: #ffffff;
  border-radius: 18px;
  padding: 38px 24px;
  margin: 0 auto;
  box-shadow: 0px 8px 20px 0px rgba(170, 123, 162, 0.14);
}

.list-content .header {
  display: flex;
  justify-content: space-between;
}
.search-left {
  display: flex;
  align-items: center;
}
.qr-code {
  width: 42px;
  height: 40px;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  position: relative;
  cursor: pointer;
}
.qr-code img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 19px;
  height: 19px;
}
.el-select-w118,
.el-select-w150 {
  width: 118px;
  height: 40px;
  margin-right: 12px;
}
.el-select-w150 {
  width: 150px;
}
:deep(.el-select__wrapper) {
  height: 40px;
}
.search-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.search-right-tool {
  display: flex;
  align-items: center;
  margin-right: 28px;
  overflow: hidden;
}
.search-right-tool:last-child {
  margin-right: 0;
}
.search-right-tool span {
  width: 98px;
  height: 22px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
  text-align: left;
  font-style: normal;
  display: inline-block;
  height: 18px;
  line-height: 18px;
  margin-left: 12px;
}

.search-right-tool img {
  width: 14px;
  height: 12px;
  vertical-align: middle;
}
.search-right-tool:last-child span {
  width: 56px;
  height: 22px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  line-height: 22px;
  text-align: left;
  font-style: normal;
}
.list-container {
  margin-top: 34px;
}
</style>
